/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, TextInput,TouchableHighlight} from 'react-native';
import {Util} from '../../util/util'
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class login extends Component<Props> {

  render() {
    return (
      <View style={styles.container}>
        {/*logo*/}
        <View style={styles.logo_item}>
          <Image style={styles.logo_img} source={{uri: 'LOGO1'}}/>
          <Text style={styles.logo_text}>好兴动商户端</Text>
        </View>
        {/*账号和密码输入*/}
        <View style={styles.edit_item}>
          <View style={styles.account}>
            <Image style={styles.account_img} source={{uri: 'name'}}/>
            <TextInput style={styles.account_input}
                placeholder="登录账号" placeholderTextColor='#C6C6CC' keyboardType='number-pad'
            />
          </View>
          <View  style={styles.pwd}>
            <Image style={styles.pwd_img} source={{uri: 'pwd'}} />
            <TextInput style={styles.pwd_input}
                       placeholder="登录密码" placeholderTextColor='#C6C6CC'
            />
          </View>
        </View>
        {/*登录密码按钮*/}
        <TouchableHighlight style={styles.login_btn}>
          <Text style={styles.login_text}>登录</Text>
        </TouchableHighlight>
        {/*快速注册和忘记密码*/}
        <View style={styles.bottom_item}>
          <TouchableHighlight style={styles.registered_btn}>
            <Text style={styles.bottom_text}>快速注册</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.forgotPwd_btn}>
            <Text style={styles.bottom_text}>忘记密码</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EEEEEE',
    alignItems: 'center',
  },
  logo_item:{
    marginTop: 92,
    alignItems: 'center',
  },
  logo_img:{
    height: 100,
    width:100,
  },
  logo_text:{
    marginTop: 30,
    height: 22,
    fontSize: 22,
    color: '#068BE9',
  },
  edit_item:{
    backgroundColor: '#fff',
    borderRadius: 10,
    marginLeft: 15,
    marginRight: 15,
    height: 110,
    marginTop: 20,
    width: Util.size.width - 30,
  },
  account:{
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: Util.pixel,
    borderBottomColor: '#e1e1e1',
  },
  pwd:{
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  account_img:{
    width: 30,
    height: 21,
    resizeMode: 'contain',
    marginLeft: 10,
  },
  pwd_img:{
    width: 30,
    height: 21,
    resizeMode: 'contain',
    marginLeft: 10,
  },
  account_input:{
    fontSize: 15,
    marginLeft:7,
    width: 300,
  },
  pwd_input:{
    fontSize: 15,
    marginLeft:7,
    width: 300,

  },
  login_btn:{
    marginTop: 45,
    marginLeft: 15,
    marginRight: 15,
    height: 50,
    backgroundColor: '#26a5ff',
    width: Util.size.width - 30,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 25,
  },
  login_text: {
    fontSize: 15,
    fontFamily: 'PingFang SC',
    color: '#fff'
  },
  bottom_item:{
    flexDirection: 'row',
    width: Util.size.width - 60,
    height: 30,
    marginTop: 30,
    marginLeft: 30,
    marginRight: 30,

  },
  registered_btn:{
    flex: 1,
  },
  forgotPwd_btn:{
    flex: 1,
    alignItems: 'flex-end'
  },
  bottom_text:{
    fontSize: 14,
    fontFamily: 'PingFang SC',
    color: '#999999'
  }
});
